html,
body {
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
}

body {
	/* background-image: url('/images/main_bg.png'); */
	background: url(../images/main_bg.png) center no-repeat;
	background-size: cover;
}

ul,
li {
	list-style: none;
	margin: 0;
	padding: 0;
}
}

#hr1,
#hr2 {
	width: 100%;
	height: 1px;
	/* background-color: #183D97; */
	/* background-color: white; */
	border-bottom: 1px solid white;
	margin: 1px 0;
	padding: 0;
}

#page {
	display: flex;
	flex-direction: column;
	color: white;
}

#page #header_div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 10vh;
	background-size: cover;
	overflow: hidden;
	position: relative;
	color: #46BCEA;
}

/* 大标题 样式 */
#header_div #title {
	margin-top: 20px;
	font-size: 28px;
	font-weight: bold;
	color: #44B6E5;
}

/* 时间 样式 */
#header_div #time {
	font-size: 18px;
	margin-top: 20px;
}

/* 二级模块标题样式 */
.sub_title {
	font-size: 18px;
	font-weight: bold;
}

#page #main_div {
	display: flex;
	width: 100%;
	height: 80vh;
}

#page #footer_div {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: 100%;
	height: 10vh;
	font-weight: bold;
	font-size: 18px;
}

#main_div #area_data_div {
	width: 26vw;
	display: flex;
	flex-direction: column;
	border: #183D97 solid 1px;
	border-radius: 2px;
	padding: 10px;
	margin: 10px;
	background-color: rgba(12, 38, 81, 0.2);
}

/* 选择日期 搜索 */
#area_data_div #select_date {
	margin: 10px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* 开始日期 结束日期 */
#select_date #s_date,
#select_date #e_date {
	flex-grow: 1;
	margin: 5px;
	border: #8499BA solid 1px;
	text-align: center;
	font-size: 14px;
}

/* 搜索日期 按钮 */
#select_date #btn_search_1 {
	width: 50px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	background-color: #183D95;
	border: #183D95 solid 1px;
	border-radius: 2px;
	font-size: 14px;
}

/* 出入园车辆数 */
#area_data_div #in_out_num {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 车辆数字 */
#in_out_num #in_num,
#in_out_num #out_num {
	margin: 0 40px 0 0;
	font-size: 24px;
	color: #02FECD;
}

#area_data_div #in_truck_num_0 {
	color: #02FECD;
	margin: 20px 0;
}

#area_data_div #chart1 {
	width: 100%;
	flex-grow: 1;
}

#main_div #map_div {
	width: 48vw;

}

/* 入园 出园 记录 */
#main_div #in_out_reco_div {
	width: 26vw;
	display: flex;
	flex-direction: column;
	padding: 10px;
	margin: 10px;
	overflow: hidden;
}

/* 出入园区记录的来两个容器 */
#in_out_reco_div #in_reco,
#in_out_reco_div #out_reco {
	height: 33vh;
	display: flex;
	flex-direction: column;
	margin: 10px;
	padding: 10px;
	border: #183D97 solid 1px;
	border-radius: 2px;
	background-color: rgba(12, 38, 81, 0.2);
}

#in_reco #in_reco_head_div,
#in_reco #in_reco_list,
#out_reco #out_reco_head_div,
#out_reco #out_reco_list {
	display: flex;
	font-size: 14px;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
}

#in_reco #in_reco_list,
#out_reco #out_reco_list {
	/* 修正复用的样式 */
	margin-top: 0;
	font-size: 10px;
}

.vue_scroll {
	overflow: hidden;
}

#in_reco_list .item_reco,
#out_reco_list .item_reco {
	height: 32px;
	line-height: 32px;
}

#map {
	width: 100%;
	height: 100%;
}
